<template>
  <div class="event-list">
    <el-row :gutter="20" class="row">
      <el-col :span="18">
        <el-select v-model="value" placeholder="请选择事件">
          <el-option
            v-for="item in eventOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button @click="openDrawer" type="primary" size="mini" class="btn"
          >确认</el-button
        >
      </el-col>
    </el-row>
    <el-row class="row">
      <el-card class="box-card">
        <div slot="header">
          <span>已有事件</span>
        </div>
        <div v-for="item in events" :key="item" class="tag">
          <el-tag
            closable
            @close="deleteEvent(item)"
            @click="handleTagClick(item)"
          >
            {{ item }}
          </el-tag>
        </div>
      </el-card>
    </el-row>

    <el-drawer
      :title="value"
      :visible.sync="drawer"
      direction="ltr"
      @open="handleDrawerOpen"
      @closed="handleDrawerClose"
    >
      <el-row>
        <el-input
          class="textarea"
          type="textarea"
          :autosize="{ minRows: 6 }"
          placeholder="// 补充代码"
          v-model="textarea"
        >
        </el-input>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button @click="_addEvent" type="primary" size="mini"
          >确认</el-button
        >
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import { eventOptions } from "./Event.js";
import { mapMutations, mapState } from "vuex";
import {
  removeGlobalKeydown,
  listenGlobalKeydown,
} from "@/utils/shortcutKey.js";
export default {
  data() {
    return {
      value: "",
      eventOptions,
      drawer: false,
      textarea: "",
      events: [],
    };
  },
  computed: {
    ...mapState(["curComponent"]),
  },
  methods: {
    ...mapMutations(["addEvent"]),
    getEventsList() {
      if (this.curComponent == null) return;
      this.events = Object.keys(this.curComponent.events);
    },
    _addEvent() {
      this.drawer = false;
      let event = {
        type: this.value,
        cb: this.textarea,
      };
      this.addEvent(event);
    },
    openDrawer() {
      if (this.value == "") return this.$message.error("请选择事件");
      this.drawer = true;
    },
    handleDrawerOpen() {
      removeGlobalKeydown();
      this.textarea = this.curComponent.events[this.value] || "";
    },
    handleDrawerClose() {
      listenGlobalKeydown();
      this.getEventsList();
    },
    handleTagClick(event) {
      this.value = event;
      this.drawer = true;
    },
    deleteEvent(event) {
      this.$delete(this.curComponent.events, event);
      this.getEventsList();
    },
  },
  watch: {
    curComponent() {
      this.getEventsList();
    },
  },
  created() {
    this.getEventsList();
  },
};
</script>

<style lang="less" scoped>
.el-row {
  margin-top: 20px;
}
.box-card {
  font-size: 12px;
  text-align: center;
}
.tag {
  margin-bottom: 10px;
  cursor: pointer;
}

/deep/ .el-drawer__body {
  padding: 0 20px;
  border-top: 1px solid #ccc;
}
</style>
